/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TextInput,
	TouchableOpacity,
	ToolbarAndroid,
	Dimensions,
	Platform,
	BackHandler,
	CameraRoll,
	DeviceEventEmitter
} from 'react-native';

import CameraRollPicker from './index';
import Common from '../../../component/common';
import ToolbarComponent from '../../../component/ToolbarComponent';
import ScreenUtils from '../../../component/ScreenUtils';

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 25;
const HEADER_HEIGHT = Platform.OS === 'ios' ? 24 + STATUS_BAR_HEIGHT : 47 + STATUS_BAR_HEIGHT;

export default class cameraRollCom extends Component {
	constructor(props) {
		super(props);

		this.state = {
			relaPicsLength: this.props.name ? this.props.name.length : 0,
			relaPics: this.props.name ? this.props.name : [],
		};
		this.fetchData = this.fetchData.bind(this);
		this.selectedData = this.props.name ? this.props.name : [];

	}
	componentWillMount() {
		if(Platform.OS === 'android') {
			BackHandler.addEventListener('hardwareBackPress', () => Common.onBack(this));
		}
	}
	componentWillUnmount() {

		if(Platform.OS === 'android') {
			BackHandler.removeEventListener('hardwareBackPress', () => Common.onBack(this));
		}
	}
	componentDidMount() {
		//this.fetchData();

	}
	fetchData() {

	}

	getSelectedImages(selectedImages, currentImage) {

		this.selectedData = selectedImages;
		this.setState({
			relaPicsLength: selectedImages.length,
		})
	}

	render() {
		return(
			<View style={{flex:1}}>
		    	<ToolbarComponent
			    	leftItem={{
			            title: 'Back',
			            layout: 'icon',
			            icon: require("../../../images/back.png"),
			            onPress: () => {
			              Common.onBack(this);
			            },
			        }}
			    	rightItem={{
			    		title:this.state.relaPicsLength>0 ? '完成('+this.state.relaPicsLength+"/3)" : '完成',
			    		onPress:() =>{
			    			DeviceEventEmitter.emit('upLoadImage',JSON.stringify(this.selectedData));
			    			Common.onBack(this);
			    		}
			    	}}
		    	>
		          
		        </ToolbarComponent>
		    	<CameraRollPicker 
		    		backgroundColor = "#ededed"
		    		callback={this.getSelectedImages.bind(this)} 
		    		emptyText="加载中..."
		    		imageMargin ={1}
		    		assetType ="Photos"
		    		emptyTextStyle={{flex:1,textAlign:'center',marginTop:(Dimensions.get('window').height/2 - HEADER_HEIGHT/2)}}
		    		maximum ={3}
		    		initialListSize={1}
		    		selected={this.selectedData}
		    		selectedMarker = {
		    			<View style={{backgroundColor:'rgba(0,0,0,0.5)',flex:1,position:"relative"}}>
		    				<Image style={{width:20,height:20,position:"absolute",right:0,}} source = {require('../../../images/me/circle-check.png')}/>
		    			</View>
					}
				/> 
			</View>
	);
}
}

const styles = StyleSheet.create({
	toolbarV: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	toolbarT: {
		color: '#ffffff',
		fontWeight: 'bold',
		fontSize: 20,
	},
});